import React, { lazy } from "react";
import { Route, Redirect } from "react-router-dom";

import LazyLoad from "./lazyLoad";

import App from "../App";

const Home = lazy(() => import("../pages/home/index"));
const Detail = lazy(() => import("../pages/detail/index"));
const City = lazy(() => import("../pages/city/index"));
const NotFound = lazy(() => import("../pages/notfound/index"));

const Movies = lazy(() => import("../pages/home/movies/index"));
const Videos = lazy(() => import("../pages/home/videos/index"));
const Mini = lazy(() => import("../pages/home/mini/index"));
const Show = lazy(() => import("../pages/home/show/index"));
const Mine = lazy(() => import("../pages/home/mine/index"));

const Hot = lazy(() => import("../pages/home/movies/hot/Index"));
const Cinema = lazy(() => import("../pages/home/movies/cinema/Index"));
const Wait = lazy(() => import("../pages/home/movies/wait/Index"));
const Classic = lazy(() => import("../pages/home/movies/classic/Index"));

const Index = () => {
  return (
    <App>
      <Redirect from="/" to="/home" exact></Redirect>
      <Route path="/home">
        <LazyLoad
          component={
            <Home>
              <Redirect from="/home" to={`/home/movies`} exact></Redirect>
              <Route path={`/home/movies`}>
                <LazyLoad
                  component={
                    <Movies>
                      <Redirect
                        from="/home/movies"
                        to="/home/movies/hot"
                        exact
                      ></Redirect>
                      <Route path="/home/movies/hot">
                        <LazyLoad component={<Hot />}></LazyLoad>
                      </Route>
                      <Route path="/home/movies/cinema">
                        <LazyLoad component={<Cinema />}></LazyLoad>
                      </Route>
                      <Route path="/home/movies/wait">
                        <LazyLoad component={<Wait />}></LazyLoad>
                      </Route>
                      <Route path="/home/movies/classic">
                        <LazyLoad component={<Classic />}></LazyLoad>
                      </Route>
                    </Movies>
                  }
                ></LazyLoad>
              </Route>
              <Route path={`/home/videos`}>
                <LazyLoad component={<Videos />}></LazyLoad>
              </Route>
              <Route path={`/home/mini`}>
                <LazyLoad component={<Mini />}></LazyLoad>
              </Route>
              <Route path={`/home/show`}>
                <LazyLoad component={<Show />}></LazyLoad>
              </Route>
              <Route path={`/home/mine`}>
                <LazyLoad component={<Mine />}></LazyLoad>
              </Route>
            </Home>
          }
        ></LazyLoad>
      </Route>
      <Route path="/detail/:id">
        <LazyLoad component={<Detail />}></LazyLoad>
      </Route>
      <Route path="/city">
        <LazyLoad component={<City />}></LazyLoad>
      </Route>
      <Route path="*">
        <LazyLoad component={<NotFound />}></LazyLoad>
      </Route>
    </App>
  );
};

export default Index;
